<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">

        <el-form-item style="margin-right: 15px;">
          <el-input v-model="queryParams.name" placeholder="板块名字"></el-input>
        </el-form-item>

        <el-form-item style="margin-right: 15px;">
          <el-select v-model="<number>queryParams.plateType" placeholder="所属类型" style="width: 240px">
            <el-option v-for="item in plateTypeOptions" :key="<number>item.value" :label="item.label"
              :value="<number>item.value" />
          </el-select>
        </el-form-item>

        <el-form-item style="margin-right: 15px;">
          <el-select v-model="<number>queryParams.contentType" placeholder="内容类型" style="width: 240px">
            <el-option v-for="item in contentTypeOptions" :key="<number>item.value" :label="item.label"
              :value="<number>item.value" />
          </el-select>
        </el-form-item>


        <el-form-item>
          <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
        </el-form-item>

        <el-form-item>
          <el-button @click="add()">新增</el-button>
        </el-form-item>


      </el-form>
    </div>

    <el-card shadow="never" class="table-container">
      <el-table :data="plateTypePageData" style="width: 100%" border>
        <el-table-column prop="name" label="板块名称" align="center" />
        <el-table-column prop="plateType" label="内容类型" align="center">
          <template #default="scope">
            <span v-if="scope.row.plateType == 1">艺术机构</span>
            <span v-if="scope.row.plateType == 2">艺术家</span>
            <span v-if="scope.row.plateType == 3">艺术品</span>
          </template>
        </el-table-column>
        <el-table-column prop="tempTypeName" label="模板类型名称" align="center" />
        <el-table-column prop="tempAddr" label="模板位置" align="center" />
        <el-table-column label="模板示例图片">
          <template #default="scope">
            <img v-if="scope.row.exampleImg !== null && scope.row.exampleImg !== ''" :src="scope.row.exampleImg" alt=""
              style="width: 100px;height: 100px;">
          </template>
        </el-table-column>
        <el-table-column prop="sort" label="排序" align="center" />
        <el-table-column prop="status" label="状态" align="center" />
        <el-table-column label="操作">
          <template #default="scope">
            <el-button plain type="primary" size="small" @click="handleEdit(scope.row)">编辑</el-button>
            <el-button plain type="danger" size="small" @click="handleDelete(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <pagination v-if="total > 0" v-model:total="total" v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize" @pagination="handleQuery" />
    </el-card>

    <!-- 修改弹框 -->
    <el-dialog :title="dialog.title" v-model="dialog.visible" width="30%">
      <el-form :model="editForm" label-width="160px">
        <el-form-item label="模板名字">
          <el-input v-model="editForm.name" />
        </el-form-item>
        <el-form-item label="模板类型">
          <el-select filterable v-model="<string>editForm.plateId" placeholder="模板类型" style="width: 240px">
            <el-option v-for="item in selectPlateTypeOption" :key="<string>item.typeId" :label="<string>item.name"
              :value="<string>item.typeId" />
          </el-select>
        </el-form-item>
        <el-form-item label="模板地址">
          <el-input v-model="editForm.tempAddr" />
        </el-form-item>
        <!-- <el-form-item label="所属类型">
          <el-select v-model="<number>editForm.plateType" placeholder="所属类型" style="width: 240px">
            <el-option v-for="item in plateTypeOptions" :key="<number>item.value" :label="item.label"
              :value="<number>item.value" />
          </el-select>
        </el-form-item> -->
        <el-form-item label="预览图">
          <single-upload v-model="<string>editForm.exampleImg" />
        </el-form-item>

        <el-form-item label="排序">
          <el-input-number v-model="<number>editForm.sort" :min="1" :max="999" />
        </el-form-item>


      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editDialogVisible = false">
            取 消
          </el-button>
          <el-button type="primary" @click="editItem">
            确 定
          </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import TemplateDetailAPI from "@/api/templateDetail";
import SingleUpload from "@/components/Upload/SingleUploadp.vue";
import {

  TemplateDetailForm,
  TemplateDetail,
  TemplateDetailPageResult,
  TemplateDetailQuery,
  TemplateDetailPageVO
} from "@/api/templateDetail/model";
import PlateTypesAPI from "@/api/plateType";

import {

  PlateTypeForm,
  PlateType,
  PlateTypePageResult,
  PlateTypeQuery,
  PlateTypePageVO
} from "@/api/plateType/model";

defineOptions({
  name: "TemplateDetail",
  inheritAttrs: false,
});



const plateTypeOptions = [
  {
    value: null,
    label: '',
  },
  {
    value: 1,
    label: '机构',
  },
  {
    value: 2,
    label: '艺术家',
  },
  {
    value: 3,
    label: '艺术品',
  }
]
// 内容类型 1:简介类型 11:简介+简介 12:简介+艺术家列表 13:简介+艺术品列表 2:艺术家列表 3:艺术家列表 4:图片类型 5:资讯类型 6:超链接
const contentTypeOptions =
  [
    {
      value: null,
      label: '',
    },
    {
      value: 1,
      label: '简介',
    },
    {
      value: 11,
      label: '简介+简介',
    },
    {
      value: 12,
      label: '简介+艺术家列表',
    },
    {
      value: 13,
      label: '简介+艺术品列表',
    },
    {
      value: 2,
      label: '艺术家列表',
    },
    {
      value: 23,
      label: '艺术家列表+艺术品列表',
    },
    {
      value: 3,
      label: '艺术品列表',
    },
    {
      value: 4,
      label: '图片类型列表',
    },
    {
      value: 5,
      label: '资讯类型列表',
    },
    {
      value: 6,
      label: '超链接',
    },
  ]

const queryFormRef = ref(ElForm);


const editForm = reactive<TemplateDetailForm>({

});

const plateTypeQueryParams = reactive<PlateTypeQuery>({
  pageNum: 1,
  pageSize: 10,
});

const loading = ref(false);
const editDialogVisible = ref(false);

// 绑定艺术家数据
const selectPlateTypeOption = ref<PlateType[]>([]);


const total = ref(0);
// 搜索参数
const queryParams = reactive<TemplateDetailQuery>({
  pageNum: 1,
  pageSize: 10,
  name: ''
});

const plateTypePageData = ref<TemplateDetailPageVO[]>();

const dialog = reactive({
  title: "",
  visible: false,
});

/**
 * 打开新增弹框
 */
function add() {
  editForm.id = null
  editForm.name = null;
  editForm.tempTypeName = null;
  editForm.tempAddr = null;
  editForm.exampleImg = null;
  editForm.plateId = null;
  editForm.tempId = null;
  editForm.createUser = null;
  editForm.createTime = null;
  editForm.updateTime = null;
  editForm.sort = 0;
  dialog.visible = true;
}
/**
 * 打开修改弹框
 * @param row 
 */
function handleEdit(row: TemplateDetail) {
  editForm.id = row.id;
  editForm.name = row.name
  editForm.tempTypeName = row.tempTypeName
  editForm.tempAddr = row.tempAddr
  editForm.exampleImg = row.exampleImg
  editForm.plateId = row.plateId
  editForm.tempId = row.tempId
  editForm.createUser = row.createUser;
  editForm.createTime = row.createTime;
  editForm.updateTime = row.updateTime
  editForm.sort = row.sort
  dialog.visible = true;
}

/** 查询 */
function handleQuery() {
  loading.value = true;
  TemplateDetailAPI.getPage(queryParams)
    .then((data) => {
      plateTypePageData.value = data.records;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}
/**
 * 保存修改
 */
function editItem() {
  // 当id存在时执行修改操作，否则执行新增操作
  if (editForm.id) {
    TemplateDetailAPI.update(editForm).then(() => {
      handleQuery();
      dialog.visible = false;
    })
  } else {
    TemplateDetailAPI.add(editForm).then(() => {
      handleQuery();
      dialog.visible = false;
    })
  }

}

function handleDelete(row: TemplateDetail) {
  // 执行删除操作

}


function getPlateTypeList() {
  PlateTypesAPI.getList(plateTypeQueryParams).then((data) => {
    selectPlateTypeOption.value = data;
  })
}









onMounted(() => {
  handleQuery();
  getPlateTypeList()
});
</script>
